"use client";

import React from "react";
import {BASIC_INFO, EXPERIENCE} from "@/lib/constants";
import {format} from "date-fns";
import {formatInfo} from "@/lib/utils";

const Preview = ({data}: any) => {
    const {basicInfo, detailInfo} = data;

    return (
        <div className={`bg-white p-4 space-y-4`}>
            <TitleBar text={basicInfo?.title}>
                <div className={'grid grid-cols-5 '}>
                    <div className={'col-span-3 grid grid-cols-2 gap-y-2'}>
                        {basicInfo?.orderShow?.map((key: any) => {
                            return (
                                <div className="flex items-center space-x-1">
                                    <label
                                        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                                        {BASIC_INFO[key].label}：
                                    </label>
                                    <div className={"text-sm whitespace-nowrap"}>
                                        {formatInfo(key, basicInfo[key])}
                                    </div>
                                </div>
                            )
                        })}
                    </div>
                    <div className={'col-span-2 flex justify-center items-center'}>
                        <div className={'w-36 h-48 border flex justify-center items-center'}>
                            此处是头像
                        </div>
                    </div>
                </div>
            </TitleBar>
            {detailInfo.map((item: any) => (
                item?.isShow && (
                    item.classify === 'EXPERIENCE' ?
                        item?.value?.length > 0 &&
                        <TitleBar text={item?.title}>
                            <div className={'space-y-8'}>
                                {item.value.map((obj: any, index: number) => (
                                    <div key={index} className={'space-y-4'}>
                                        <div className={'flex justify-between items-center text-sm font-bold'}>
                                            <div className={'font-normal'}>
                                                {format(obj.startTime, "yyyy-LL")} - {format(obj.endTime, "yyyy-LL")}
                                            </div>
                                            <div>
                                                {obj.name}
                                            </div>
                                            <div>
                                                {obj.name}
                                            </div>
                                        </div>
                                        {obj.content &&
                                            <div>
                                                <p className={'font-bold'}>{EXPERIENCE[item.type]?.content?.label}：</p>
                                                <p>{obj.content}</p>
                                            </div>
                                        }
                                        {obj.result &&
                                            <div>
                                                <p className={'font-bold'}>{EXPERIENCE[item.type]?.result?.label}：</p>
                                                <p>{obj.result}</p>
                                            </div>
                                        }
                                    </div>
                                ))}
                            </div>
                        </TitleBar>
                        :
                        item?.value && <TitleBar text={item?.title}>
                            <p>{item.value}</p>
                        </TitleBar>
                )
            ))}
        </div>
    )
}

const TitleBar = ({text, children}: any) => {
    return (
        <div className={'flex w-full flex-col'}>
            <div className='flex w-full bg-[#3978a3]/10'>
                <div className='flex text-base font-bold bg-[#3978a3] text-white px-4 py-1'>
                    {text}
                </div>
            </div>
            <div className={'py-4 px-2'}>
                {children}
            </div>
        </div>
    )
}


export default Preview;